<template>
    <div class="teleport">
        <a-button @click="handleShow">弹窗</a-button>
        <Teleport v-if="showDialog" to="body">
            <div class="dialog-bg" @click="handleClose">
                <div class="body-dialog">这是从组件中插入的全局弹窗</div>
            </div>
        </Teleport>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const showDialog = ref(false)
const handleShow = () => {
    showDialog.value = true
}
const handleClose = () => {
    showDialog.value = false
}
</script>
<style lang="scss" scoped>
.teleport {
}
.dialog-bg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    .body-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60vw;
        height: 40vh;
        border: 2px solid black;
        border-radius: 20px;
        transform: translate(-50%, -50%);
    }
}
</style>
